<template>
    <div>
        <el-input v-model="vo.username" placeholder="用户名" style="width:223px"></el-input>
        <el-input v-model="vo.accountid" placeholder="账号" style="width:223px"></el-input>

            <el-date-picker
      v-model="vo.datebegin"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
    ~
        <el-date-picker
      v-model="vo.dateend"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
         余额
        <el-input v-model="vo.moneybegin" placeholder="金额开始" style="width:223px"></el-input>
       致 <el-input v-model="vo.moneyend" placeholder="金额结束" style="width:223px"></el-input>
         <el-button v-on:click="searchTj">查询</el-button>
          <el-button @click="newZh">开户</el-button>


          <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="username"
      label="账户姓名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="acard"
      label="账户号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="bemoney"
      label="账户余额"
      width="120">
    </el-table-column>
    <el-table-column
      prop="createdt"
      label="开户时间"
      width="120">
    </el-table-column>
    <el-table-column
      prop="id"
      label="主键"
      width="300">
    </el-table-column>
    
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleCQ(scope.row)" type="text" size="small">存钱</el-button>
        <el-button @click="handleQQ(scope.row)" type="text" size="small">取钱</el-button>
        <el-button @click="handleZZ(scope.row)" type="text" size="small">转账</el-button>
        <el-button @click="handleYYLS(scope.row)" type="text" size="small">银行流水</el-button>
        
        
      </template>
    </el-table-column>
  </el-table>





<el-pagination
  :page-size="pageCount"
  :current-page="currentPage"
  :page-count="pageCount"
  layout="prev, pager, next"
  @current-change="changePagenum"
  :total="totalrows">
</el-pagination>




<el-dialog title="新开户" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="账户名称" :label-width="formLabelWidth">
      <el-input v-model="form.username" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="卡号" :label-width="formLabelWidth">
      <el-input v-model="form.acard" autocomplete="off"></el-input>
    </el-form-item>

<el-form-item label="创建时间" :label-width="formLabelWidth">


     <el-date-picker
      v-model="form.createdt"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addXKH">确 定</el-button>
  </div>
</el-dialog>



<el-dialog title="取款" :visible.sync="dialogFormVisibleQK">
  <el-form :model="form">

    <el-form-item label="id" :label-width="formLabelWidth">
      <el-input v-model="form.id" autocomplete="off" disabled="true"></el-input>
    </el-form-item>

    <el-form-item label="账户名称" :label-width="formLabelWidth">
      <el-input v-model="form.username" autocomplete="off" disabled="true"></el-input>
    </el-form-item>

    <el-form-item label="卡号" :label-width="formLabelWidth">
      <el-input v-model="form.acard" autocomplete="off" disabled="true" ></el-input>
    </el-form-item>
    
   <el-form-item label="余额" :label-width="formLabelWidth">
      <el-input v-model="form.bemoney" autocomplete="off" disabled="true"></el-input>
    </el-form-item>

   <el-form-item label="取款金额" :label-width="formLabelWidth">
      <el-input v-model="form.money" autocomplete="off"></el-input>
    </el-form-item>

    



  </el-form>

  
  <div slot="footer" class="dialog-foot
  
  er">
    <el-button @click="dialogFormVisibl
    
    e = false">取 消</el-button>
    <el-button type="primary" @click="addQK">确 定</el-button>
  </div>
</el-dialog>



<el-dialog title="存款" :visible.sync="dialogFormVisibleCQ">
  <el-form :model="form">

    <el-form-item label="id" :label-width="formLabelWidth">
      <el-input v-model="form.id" autocomplete="off" disabled="true"></el-input>
    </el-form-item>


    <el-form-item label="账户名称" :label-width="formLabelWidth">
      <el-input v-model="form.username" autocomplete="off" disabled="true"></el-input>
    </el-form-item>

    <el-form-item label="卡号" :label-width="formLabelWidth">
      <el-input v-model="form.acard" autocomplete="off" disabled="true"></el-input>
    </el-form-item>
    
   <el-form-item label="余额" :label-width="formLabelWidth">
      <el-input v-model="form.bemoney" autocomplete="off" disabled="true"></el-input>
    </el-form-item>

   <el-form-item label="存款金额" :label-width="formLabelWidth">
      <el-input v-model="form.money" autocomplete="off"></el-input>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCK">确 定</el-button>
  </div>
</el-dialog>



<el-dialog title="转款" :visible.sync="dialogFormVisibleZZ">

  <el-form :model="form">
    <el-form-item label="id" :label-width="formLabelWidth">
      <el-input v-model="form.id" autocomplete="off" disabled="true"></el-input>
    </el-form-item>

    <el-form-item label="账户名称" :label-width="formLabelWidth">
      <el-input v-model="form.username" autocomplete="off" disabled="true"></el-input>
    </el-form-item>

    <el-form-item label="卡号" :label-width="formLabelWidth">
      <el-input v-model="form.acard" autocomplete="off" disabled="true"></el-input>
    </el-form-item>
    
   <el-form-item label="余额" :label-width="formLabelWidth">
      <el-input v-model="form.bemoney" autocomplete="off" disabled="true"></el-input>
    </el-form-item>


    <el-form-item label="对方名称" :label-width="formLabelWidth">
      <el-input v-model="form.toname" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="对方卡号" :label-width="formLabelWidth">
      <el-input v-model="form.totaccountid" autocomplete="off"></el-input>
    </el-form-item>


   <el-form-item label="转账金额" :label-width="formLabelWidth">
      <el-input v-model="form.money" autocomplete="off"></el-input>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addZZ">确 定</el-button>
  </div>
</el-dialog>


<el-dialog title="银行刘水" :visible.sync="dialogTableVisibleYHLS">
  <el-table :data="gridData">
    <el-table-column property="aid" label="账号" width="150"></el-table-column>
    <el-table-column property="taccountid" label="账号ID" width="200"></el-table-column>
    <el-table-column property="bemoney" label="前的金额"></el-table-column>
    <el-table-column property="aftermoney" label="后的金额" width="150"></el-table-column>
    <el-table-column property="type" label="类型" width="200"></el-table-column>
    <el-table-column property="toname" label="被转人姓名"></el-table-column>
    <el-table-column property="totaccountid" label="被转人账号"></el-table-column>




  </el-table>
</el-dialog>











    </div>
</template>

<script>
import axios from 'axios';

export default {

// 页面初始化过程中 ，从服务器端获取我么数据刷新到页面
  created () {
    //直接调用分页查询数据
    searchTj();
    
  },

// 方法的脚本
    methods: {
        //转账
        addZZ(){
            alert("转账成功");
 this.dialogFormVisibleZZ = false ;
        },
        // 存款
        addCK(){
   alert("cQ");
       this.dialogFormVisibleCQ = false ;
        },
        //取款
        addQK(){
   alert("qk");
       this.dialogFormVisibleQK = false ;
        },
        addXKH(){
        
         axios.post('http://127.0.0.1:8089/taccount/addAccount' , this.form)
         .then(res=>{
            this.dialogFormVisible = false ;
           // this.search();

         })

    //        alert(  this.form.createdt);
    //    this.dialogFormVisible = false ;
        },
  
        // 分页的事件
        changePagenum(cp=1){

          this.currentPage = cp ;
         axios.post('http://127.0.0.1:8089/taccount/searchFy/'+ this.currentPage+"/" + this.pageCount , this.vo)
         .then(res=>{
            this.tableData = res.data.rows ;
            this.totalrows= res.total;

            
           // this.search();

         })


        fsdfsdf 

        },
          handleZZ(){
              this.dialogFormVisibleZZ = true ;
            alert("ZZ");
        },
          handleYYLS(){
              this.dialogTableVisibleYHLS = true ;
            alert("YHLS");
        },
        handleCQ(row){
            // 赋值 获取我们的账号信息 ，让账号信息给form 表单
            this.form = row;
            this.dialogFormVisibleCQ = true ;
            alert("cq");
        },
        handleQQ(){
       alert("qa");
       this.dialogFormVisibleQK = true ;
        },
        searchTj(){
            axios.post('http://127.0.0.1:8089/taccount/searchFy/'+ this.currentPage+"/" + this.pageCount , this.vo)
         .then(res=>{
            this.tableData = res.data.rows ;
            this.totalrows= res.total;

            
           // this.search();

         })
         
           
        },
         newZh(){
             alert("kaihu");
             this.dialogFormVisible =true ;

         }
        
    },
   


// 页面数据的初始化 对象
    data() {
    return {
        //page 
        currentPage:1, //當前第幾頁
        pageCount:2,   // 每頁有多少條
        totalrows:10,
        //银行刘水初始化数据
        gridData: [{
          aid: '2016-05-02',
          taccountid: '王小虎',
          bemoney: '上海市普陀区金沙江路 1518 弄',

        }],
      vo:{},
      tableData: [],
        dialogFormVisible:false,
        dialogFormVisibleQK:false,
        dialogFormVisibleCQ:false,
        dialogFormVisibleZZ:false,
        dialogTableVisibleYHLS:false,
        form: {
          username: '',
          acard: '',
          createdt: '',
          money:0,
          bemoney:0,
          totaccountid:"",
          toname:"",


        },

    }
  }
    
}
</script>